<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>
<link rel="stylesheet" media="all" type="text/css"
	href="<c:url value="/resources/css/styles.css" />">
	
	<script  type="text/javascript"
	src='<c:url value="/resources/js/jquery-1.11.1.min.js" />'></script>
<meta charset="utf-8">
<title>Travel Journal</title>
</head>
<body>
	<div class="header">
		<div class="topnav">
			<ul id="nav">
				<li><a href="/TravelJournal/">Log Out</a></li>
			</ul>
		</div>
	</div>


	<div id="content">
		<div id="sidebar">
			<ul>
				<li><a href="/TravelJournal/welcome">Home</a></li>
				<li><a href="/TravelJournal/records/myrecords">My Records</a></li>
				<li><a href="#">Add Record</a></li>
				<li><a href="/TravelJournal/records/map">My Travel Map</a></li>
			</ul>
		</div>
			<div id="main-content">

				<c:if test="${not empty error}">
					<div class="error">${error}</div>
				</c:if>

				<form:form method="post" commandName="travelRecord">

					<form:label path="country">Country:</form:label>
					
					<form:select id="country" path="country">
					</form:select>

					<form:label path="city">City:</form:label>
					<form:select id="city" path="city">
						<form:option value="">City</form:option>
					</form:select>

					<input id='submitButton' type="submit" value="Save" />
				</form:form>

			</div>
		


	</div>
	
	<script type="text/javascript">
$(document).ready(
	function() {
		$.getJSON('/TravelJournal/location/countries', {
			ajax : 'true'
		}, function(data) {
			var html = '<option value="">Country</option>';
			var len = data.length;
			for ( var i = 0; i < len; i++) {
				html += '<option value="' + data[i].code + '">'
						+ data[i].name + '</option>';
			}
			html += '</option>';
                        //now that we have our options, give them to our select
			$('#country').html(html);
		});
	});
	
	
$(document).ready(function() { 
	$('#country').change(
		function() {
			$.getJSON('/TravelJournal/location/cities/' + $(this).val(), {
				
				ajax : 'true'
			}, function(data) {
				var html = '<option value="">City</option>';
				var len = data.length;
				for ( var i = 0; i < len; i++) {
					html += '<option value="' + data[i].id + '">'
							+ data[i].name + '</option>';
				}
				html += '</option>';
 
				$('#city').html(html);
			});
		});
});
</script>
	
</body>
</html>
